<template>
    <div>
        <el-breadcrumb
                separator-class="el-icon-arrow-right"
                class="breadcrumb-base"
                style="line-height: 30px;">
            <el-breadcrumb-item :to="{ path: '/example' }">
                <font-awesome-icon :icon="['fas', 'home']"></font-awesome-icon>
                样例页面
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                子页面
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="main-container">
            <el-row class="line-text-title" type="flex" justify="middle">
                <span class="title-medium text-important">标题</span>
            </el-row>

            <el-row class="line-text">
                <el-col :span="8">
                    <span class="content-text">：{{  }}</span>
                </el-col>
                <el-col :span="8">
                    <span class="content-text">: {{  }}</span>
                </el-col>
                <el-col :span="8">
                    <span class="content-text">：{{  }}</span>
                </el-col>
            </el-row>

            <el-form ref="exampleFormName" :model="exampleForm" label-width="80px">
                <el-row class="line-text-title" type="flex" justify="middle">
                    <span class="title-medium text-important">表单</span>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="输入" prop="wax">
                            <el-input v-model="exampleForm.inputA"
                                      placeholder="请输入"
                                      class="input-form"
                                      size="mini">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="选择">
                            <el-select v-model="exampleForm.selectA"
                                       placeholder="请选择"
                                       @change="exampleFormSelectChange"
                                       size="mini"
                                       class="picker-form">
                                <el-option
                                        v-for="(data, index) in exampleSelectionData"
                                        :key="index"
                                        :label="data"
                                        :value="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="输入" prop="wax">
                            <el-input v-model="exampleForm.inputB"
                                      placeholder="请输入"
                                      class="input-form"
                                      size="mini">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="选择">
                            <el-select v-model="exampleForm.selectB"
                                       placeholder="请选择"
                                       @change="exampleFormSelectChange"
                                       size="mini"
                                       class="picker-form">
                                <el-option
                                        v-for="(data, index) in exampleSelectionData"
                                        :key="index"
                                        :label="data"
                                        :value="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="单选项">
                        <el-radio-group v-model="exampleForm.single"
                                        @change="exampleFormSelectChange"
                                        size="mini" class="radio-group">
                            <el-radio v-for="(t, index) in exampleRadioData" :label="index"
                                      :key="index" size="mini">{{ t }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="多选框" ref="exampleFormMultiple">
                        <el-checkbox :indeterminate="exampleFormMultiple.isIndeterminate"
                                     v-model="exampleFormMultiple.checkAll"
                                     @change="exampleFormMultipleCheckAll"
                                     style="display: inline;">全选</el-checkbox>
                        <el-checkbox-group v-model="exampleFormMultiple.checked"
                                           @change="exampleFormMultipleCheckChange"
                                           style="display: inline;">
                            <el-checkbox v-for="(t, index) in exampleMultipleData" :label="index"
                                         :key="index+1" size="mini">{{ t }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-row type="flex" justify="center">
                <el-button @click="exampleDialogOpen" type="primary"
                           size="mini" style="margin: 0 10px">打开对话框</el-button>
                <el-button @click="jumpBack" size="mini" style="margin: 0 10px">返回</el-button>
            </el-row>
            <el-row style="margin-top: 10px;">
                <base-table
                        ref="exampleTable"
                        v-loading="!exampleTable.isReady"
                        :data="exampleTable.data"
                        :header="exampleTable.header"
                        :operation="exampleTable.operation"
                        :pageInfo="exampleTable.pageInfo"
                        :cellStyleFunc="exampleTableCellStyleFunc"
                        :buttonVisibleFunc="exampleTableButtonVisibleFunc"
                        :selected="true"
                        :pageSizes="[5, 10, 15]"
                        @selectedRow="exampleTableSelectedRow"
                        @handleClick="exampleTableButtonClick"
                        @pageJumpTo="exampleTablePageJumpTo"
                        @sizeChange="exampleTableSizeChange">
                </base-table>
            </el-row>
            <el-row style="margin-top: 10px">
                <el-form ref="exampleUploadForm" v-model="exampleUploadForm" :inline="true">
                    <el-form-item label="单张图片上传">
                        <el-upload :action="imageServiceUploadURL"
                                   :on-success="exampleUploadHandleSuccess"
                                   :show-file-list="false"
                                   :drag="true">
                            <img v-if="exampleUploadForm.imgOneUrl"
                                 :src="imageServiceURL + exampleUploadForm.imgOneUrl"
                                 class="avatar-uploader-img" alt="">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <div slot="tip" class="el-upload__tip" style="margin-top: -15px">
                                只能上传jpg/png/bmp文件
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="多张图片上传">
                        <el-upload :action="imageServiceUploadURL"
                                   :on-remove="exampleUploadHandleRemove"
                                   :on-change="exampleUploadHandleRemove"
                                   :file-list="exampleUploadForm.fileList"
                                   :drag="true"
                                   list-type="picture-card">
                            <el-button size="mini" type="primary">
                                点击上传
                            </el-button>
                            <div slot="tip" class="el-upload__tip" style="margin-top: -1px">
                                只能上传jpg/png/bmp文件
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>

        <el-dialog
                :title="exampleDialog.title"
                :visible.sync="exampleDialog.visible"
                :close-on-click-modal="false"
                :modal-append-to-body="false"
                append-to-body
                width="40%">
            <span slot="footer" class="dialog-footer" style="text-align: right;">
                <el-button @click="exampleDialog.visible = false" size="mini">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import BaseTable from '@templates/components/BaseTable';

export default {
  name: 'Example',
  components: {
    BaseTable,
  },
  data() {
    return {
      // 图片服务器地址
      imageServiceURL: process.env.ImageServiceURL,
      // 上传图片链接
      imageServiceUploadURL: `${process.env.ImageServiceURL}/upload`,
      exampleForm: {
        inputA: '',
        inputB: '',
        selectA: '',
        selectB: '',
      },
      exampleSelectionData: [
        'Selection A',
        'Selection B',
        'Selection C',
        'Selection D',
      ],
      exampleRadioData: [
        'Radio A',
        'Radio B',
        'Radio C',
        'Radio D',
      ],
      exampleMultipleData: [
        'Multiple A',
        'Multiple B',
        'Multiple C',
        'Multiple D',
      ],

      exampleDialog: {
        visible: false,
        title: '范例对话框',
      },
      exampleTableBaseData: [
        {
          name: 'nameA',
          state: 'stateA',
          createAt: 'createA',
        }, {
          name: 'nameB',
          state: 'stateB',
          createAt: 'createB',
        }, {
          name: 'nameC',
          state: 'stateC',
          createAt: 'createC',
        }, {
          name: 'nameD',
          state: 'stateD',
          createAt: 'createD',
        }, {
          name: 'nameE',
          state: 'stateE',
          createAt: 'createE',
        }, {
          name: 'nameF',
          state: 'stateF',
          createAt: 'createF',
        },
      ],
      exampleTable: {
        isReady: false,
        data: [],
        header: [
          {
            label: '名称',
            prop: 'name',
            width: '80',
          }, {
            label: '状态',
            prop: 'state',
            isButton: true,
            functionKey: 'exampleTableFunctionC',
          }, {
            label: '时间',
            prop: 'createAt',
          },
        ],
        operation: [
          {
            label: '按钮A',
            color: 'red',
            functionKey: 'exampleTableFunctionA',
          },
          {
            label: '按钮B',
            color: 'blue',
            functionKey: 'exampleTableFunctionB',
          },
        ],
        pageInfo: {
          page: 1,
          size: 15,
          total: 0,
        },
      },
      exampleFormMultiple: {
        isIndeterminate: false,
        checkAll: false,
        checked: [],
      },
      exampleUploadForm: {
        imgOneUrl: '',
        fileList: [],
      },

      exampleExtraData: {
        count: 0,
      },
    };
  },
  mounted() {
    this.exampleRequest();
    this.exampleTableDataGet();
  },
  computed: {
  },
  methods: {
    exampleFormSelectChange() {
      // 表单选择相关方法
      // console.log('exampleFormSelectChange');
    },
    exampleDialogOpen() {
      // 打开对话框调用的方法
      this.exampleDialog.visible = true;
    },

    exampleTableSelectedRow() {
      // console.log('exampleTableSelectedRow', selectedRow);
    },
    exampleFormMultipleCheckAll(val) {
      const exampleMultipleDataLabelAll = [0, 1, 2, 3];
      this.exampleFormMultiple.checked = val ? exampleMultipleDataLabelAll : [];
      this.exampleFormMultiple.isIndeterminate = false;
    },
    exampleFormMultipleCheckChange(value) {
      const checkedCount = value.length;
      this.exampleFormMultiple.checkAll = checkedCount === this.exampleMultipleData.length;
      if (checkedCount > 0 && checkedCount < this.exampleMultipleData.length) {
        this.exampleFormMultiple.isIndeterminate = true;
      } else {
        this.exampleFormMultiple.isIndeterminate = false;
      }
    },
    exampleTableButtonClick(functionKey, row) {
      this[functionKey](row);
    },
    exampleTablePageJumpTo(val) {
      this.exampleTable.pageInfo.page = val;
      // 为 exampleTable.data 赋值相应页上新数据
      this.exampleTableDataGet();
    },
    exampleTableSizeChange(val) {
      this.exampleTable.pageInfo.size = val;
      // 为 exampleTable.data 赋值相应数据量新数据
      this.exampleTableDataGet();
    },
    exampleTableButtonVisibleFunc(key, row) {
      switch (key) {
        case 'exampleTableFunctionA':
          return row.state === 'stateD';
        case 'exampleTableFunctionB':
          return row.state !== 'stateD';
        default:
          return true;
      }
    },
    exampleTableCellStyleFunc({ row, column }) {
      const baseStyle = {
        padding: '3px 0',
        'border-right': '1px solid #ffffff',
        'font-size': '14px',
      };
      if (row.state === 'stateA' && column.label === '状态' && this.exampleExtraData.count === 2) {
        baseStyle.color = 'red';
      }
      return baseStyle;
    },
    exampleTableDataGet() {
      // 接口分页从 0 开始
      this.exampleTable.isReady = false;
      this.exampleTable.pageInfo.total = this.exampleTableBaseData.length;
      const { pageInfo } = this.exampleTable;
      this.exampleTable.data = [];
      this.exampleTableBaseData.forEach((t, i) => {
        if ((pageInfo.page - 1) * pageInfo.size <= i && pageInfo.page * pageInfo.size > i) {
          const item = t;
          item.index = this.exampleTable.data.length;
          this.exampleTable.data.push(item);
        }
      });
      this.exampleTable.isReady = true;
    },
    exampleTableFunctionA(row) {
      this.exampleExtraData.count++;
      console.log('exampleTableFunctionA', row);
    },
    exampleTableFunctionB(row) {
      this.exampleExtraData.count++;
      console.log('exampleTableFunctionB', row);
    },
    exampleTableFunctionC(row) {
      this.exampleExtraData.count++;
      console.log('exampleTableFunctionC', row);
    },

    // 图片把主机地址和路径分开，只保留路径,单个图片形式
    exampleUploadHandleSuccess(res) {
      if (res.status === 'success') {
        this.exampleUploadForm.imgOneUrl = res.url.slice(res.url.indexOf('_') - 1);
      }
    },
    // 图片把主机地址和路径分开，只保留路径,多个图片形式，既上传又更新
    exampleUploadHandleRemove(file, fileList) {
      let moreUrl = '';
      if (file.status === 'success') {
        fileList.forEach((ele) => {
          if (ele.response) {
            moreUrl
              += `${ele.response.url.slice(ele.response.url.indexOf('_') - 1)}|`;
          } else {
            moreUrl
              += `${ele.url.slice(ele.url.indexOf('_') - 1)}|`;
          }
        });
      }
      console.log('moreUrl', moreUrl);
    },
    async exampleRequest() {
      try {
        await this.$axios({
          // 详见 axios 请求配置项
          method: 'GET',
          url: '/PROXY-Remote/dictionary-type',
          params: {
            code: 'institution',
          },
        }).then((res) => {
          // 请求失败
          if (res.data.code !== 200) {
            throw new Error(res.data);
          }

          // 请求成功
          // const result = res.data;
        });
      } catch (e) {
        // 跳出
      }
    },
    jumpBack() {
      this.$route.go(-1);
    },
  },
};
</script>

<style scoped>
</style>
